<script setup>
import { ref } from "vue";
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import { apiGetPracticeInfo } from "../apis/practiceApi";


let data = ref([]);
let isMore = ref(false);
let drawerData = ref({});
const drawer = ref(false);
const router = useRouter();

const getPracticeInfo = () => {

  const params = {
    currentPage: 1,
    pageSize: 10,
    type: 0,
    search: "",
  };
  apiGetPracticeInfo(params).then((res) => {
    if (res.data.length > 9) {
      data.value = res.data.splice(0, 9);
    } else {
      data.value = res.data;
    }
  }).finally(()=> isMore.value = true)
};

const onclick = (item) => {
  // router.replace({ name: "search" });
  drawerData.value = item;
  drawer.value = true;
};

const handleSearch = (val, tag) => {
  router.replace({ name: "search" });
};

const goSearchPage = () => {
  router.replace({ name: "search" });
};

onMounted(() => {
  getPracticeInfo();
});
</script>

<template>
  <div class="root">
    <Statistic />
    <div class="publishTips">最新发布<span @click="goSearchPage" class="more">更多>></span></div>
    <!-- <div class="serch"><SearchInput :searchFunc="handleSearch" /></div> -->
    <div class="list">
      <div v-for="item in data" :key="item.practiceId">
        <ListItem :data="item" @click="onclick(item)" />
      </div>
    </div>
    <div v-if="isMore" class="more_btn">
      <el-button type="primary" @click="goSearchPage" plain round
        style="height: 50px; width: 150px; margin-bottom: 20px">查看更多</el-button>
    </div>
    <a v-if="isMore"  class="href" href="https://beian.miit.gov.cn"> 京ICP备2023034342号</a>
  </div>
  <el-drawer v-model="drawer" :direction="'ltr'" title="" :with-header="false">
    <PracticeDetail :detailData="drawerData" />
  </el-drawer>
</template>
<style scoped>
.root {
  width: 100%;
  height: 100%;
}

.publishTips {
  width: 100%;
  font-size: 32px;
  font-weight: 600;
  color: #909399;
  line-height: 45px;
  margin-bottom: 20px;
  text-align: center;
  margin-top: 20px;
}

.tips {
  width: 100%;
  height: 20px;
  background-color: #44a52a;
  color: white;
}

.list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}

.serch {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.more_btn {
  display: flex;
  justify-content: center;
  margin-top: 4px;
  margin-bottom: 10px;
}

.href {
  display: flex;
  width: 100%;
  justify-content: center;
  text-decoration: none;
  color: #a9a9a9;
  font-size: 12px;
  margin-bottom: 5px;
}

.more {
  font-size: 12px;
  margin-left: 10px;
  cursor: pointer;
}
</style>
